<template>
  <div>
    <div class="modal">
      <div class="modal-bg" @click="ReleClose"></div>
      <div class="rele">
        <div class="rele-titles" id="rele-titles"><img @click="ReleClose"src="../assets/img/tub.png" alt="">发布公告</div>
        <div class="textarea">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="formData.content">
          </el-input>
        </div>
        <div class="input_radio">
          <el-switch
            v-model="formData.is_top"
            active-value="1"
            inactive-value="0"
            active-text="置顶"
            inactive-text="不置顶">
          </el-switch>
        </div>
        <div class="rele-btn">
          <el-button @click="noticeSubmit">提交公告</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import  {recoverBodyScroll} from '@/comm/js/dom.js'
  export default {
    props: {
      ReleClose: {
        type: Function
      },
      LDmodal:{
        type:Function
      },
      getNotice:{
        type:Function
      }
    },
    data() {
      return {
        formData:{
          is_top:false,
        }
      }
    },
    methods: {
      //提交
      noticeSubmit(){
        let that = this;
        that.$http.post('/index/notice',that.formData)
          .then(res=>{
            console.log(res);
            if (res.data.status === 1){
              recoverBodyScroll(); //恢复滚动条
              that.ReleClose();                                     //关闭发布弹窗
              that.formData = {};                                   //表单数据再次初始化
              that.getNotice();                                     //父组件(公告栏数据)再次获取,即更新
              that.$store.state.messageString = res.data.msg;       //提示弹窗正文
              that.pushTo = '';                                     //要跳转的页面
              that.LDmodal();                                       //打开提示弹窗
            }
            else {
              that.$store.state.messageString = res.data.msg;
              that.pushTo = '';
              that.LDmodal();
            }
          }).catch(err=>{
            console.log(err)
        })
      }
    }
  }
</script>
<style scoped>
  .reles {
    display: none;
  }
  .textarea{
    margin-top: 5px;
    padding: 15px;
  }
  .rele textarea {
    width: 94%;
    height: 105px;
    border: none;
    font-size: .7em;
  }
  .rele-btn{
    text-align: center;
    margin-top: 10px;
  }
  .rele-btn button {
    font-size: .9em;
    background: none;
    border: none;
    color: #fff;
    background: #1590ed;
    margin-right: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
  }
  .input_radio{
    height: 30px;
    line-height: 30px;
   padding-left: 15px;
  }
  .rele {
    width: 340px;
    background: #ffffff;
    position: absolute;
    z-index: 10;
    border-radius: 5px;
    overflow: hidden;
    top: 50%;
    margin-top: -100px;
    margin-left: -170px;
    left: 50%;
    border: 1px solid #d3d3d3;
    box-shadow: #e8e7e7 0px 0px 10px;
  }
  img:hover {
    background: #bd2c00 !important;
    color: #ffffff;
  }

  img{
    /*position: fixed;*/
    flex-star:40px;
    /*margin-left: 44%;*/
    position: relative;

  }
  img{
    left: 90%;
  }
  .rele-titles {
    width: 14.8%;
    line-height: 50px;
    font-size: 2em;
    color: #000;
    background: #f5f5f7;
    position: fixed;
    z-index: 9;
    border-bottom: 1px solid #d3d3d3;
    padding-right: 200px;
  }
  #rele-titles{
    width: 100%;
    position: relative;
  }
</style>
